<!--  -->
<template>
	<DrawBox
		:tool-config="{
			setMouse: true
		}"
		:mark="mark"
	>
		<div class="lsh-canvas" :id="canvasId">
			<!-- <div class="lsh-html"><slot /></div> -->
		</div>
		<div class="lsh-html"><slot /></div>
	</DrawBox>
</template>

<script setup lang="ts">
import { ref, onBeforeUnmount } from 'vue'
import { useWhiteBoard } from '../../hooks/useWhiteBoard'
import DrawBox from '@/components/task-review/compoents/draw-box/index.vue'

const canvasId = 'canvas-big-screen'
const mark = useWhiteBoard(canvasId)
const { initImg, destroy, historyUtil } = mark

onBeforeUnmount(() => {
	destroy()
})
defineExpose({
	setData: (data: string) => {
		initImg({
			url: '',
			penData: data ?? ''
		})
	},
	getData: () => {
		if (!historyUtil.data.value) return undefined
		return JSON.stringify(historyUtil.data.value)
	}
})
</script>
<style scoped lang="less">
.lsh-canvas {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
  /**减去20px,保留原题详情的滚动条事件 */
	width: calc(100% - 20px);
	height: 100%;
	transform: translateZ(0); /* 强制启用硬件加速 */
	.lsh-tool-box {
		position: absolute;
		z-index: 1;
		bottom: 20px;
		left: 50%;
		transform: translateX(-50%);
		width: 100vw;
		display: flex;
		justify-content: center;
		.lsh-tool-list {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 20px;
			flex-wrap: wrap;
			border-radius: 16px;
			background: rgba(0, 0, 0, 0.7);
			backdrop-filter: blur(5px);
			padding: 16px 32px;
			color: #fff;
			.lsh-pen-btn {
				cursor: pointer;
			}
		}
	}
	.lsh-board {
		padding: 12px 18px;
		display: flex;
		flex-direction: column;
		gap: 24px;
		.lsh-title {
			color: #0d1014;
			font-size: 18px;
			font-weight: 500;
		}
		.lsh-expand-btn {
			color: #557ca7;
			display: flex;
			align-items: center;
			gap: 4px;
			cursor: pointer;
			.lsh-arrow-icon {
				transform: rotate(180deg);
				&.expand {
					transform: rotate(0deg);
				}
			}
		}
		.lsh-option-list {
			display: flex;
			flex-direction: column;
			gap: 12px;
		}
	}
}
.lsh-html {
	position: absolute;
	height: 100%;
	width: 100%;
	overflow: auto;
}
</style>
